
<button nz-button nzType="primary" (click)="back()">返回</button>

<!-- 增加 -->
<button nz-button [nzType]="'primary'" (click)="showModal()" style="margin-bottom: 20px;"><span>增加</span></button>
  <nz-modal 
    [(nzVisible)]="isVisible"
    nzTitle="增加"
    nzFooter= null
    (nzOnCancel)="handleCancel()"
    >
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>奖惩原因</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="nameErrorTpl">
          <input nz-input formControlName="reason" />
          <ng-template #nameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              奖惩原因必填！
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>奖惩金额</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="monneyErrorTpl">
            <input nz-input formControlName="way" />
            <ng-template #monneyErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                  奖惩金额必填,必须为数字！
              </ng-container>
            </ng-template>
          </nz-form-control>
      </nz-form-item>

      <nz-form-item>
          <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired style="margin-left: -20px;">奖惩时间</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
              <nz-date-picker [nzFormat]="dateFormat" formControlName="time"></nz-date-picker>
          </nz-form-control>
      </nz-form-item>
      

      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary" [disabled]="!validateForm.valid" style='float:right;margin-right:-20px;'>提交</button>
          <button nz-button (click)="resetForm($event)" style='float:right;margin-right:10px;'>重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-modal>

<!-- 奖惩表格 -->
<nz-table #basicTable [nzData]="listOfData">
  <thead>
    <tr>
      <th>序号</th>
      <th>奖惩时间</th>
      <th>奖惩原因</th>
      <th>奖惩金额</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data;let key=index">
      <td>{{ key+1 }}</td>
      <td>{{ data.RewardTime }}</td>
      <td>{{ data.RewardReason }}</td>
      <td>{{ data.RewardMoney }}</td>
    </tr>
  </tbody>
</nz-table>
